<template>
  <div class="app-container">
    <!-- <div class="queryform">
      <el-form
        :model="form"
        ref="form"
        label-width="97px"
        label-position="right"
      >
        <el-form-item label="模型名称:" prop="modelName">
          <el-input
            v-model.trim="form.modelName"
            maxlength="128"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="信任类型:" prop="trustType">
          <el-select v-model="form.trustType" clearable>
            <el-option
              v-for="item in xinrenList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用:" prop="usingStatus">
          <el-select v-model="form.usingStatus" clearable>
            <el-option
              v-for="item in usingStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refresh">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <!-- 操作栏 -->
    <div class="buttons">
      <el-button type="primary" icon="el-icon-plus" @click="add"
        >新增</el-button
      >
    </div>
    <div class="mod-result-table">
      <HTable
        ref="table"
        :tableData="tableData"
        :columnConfigs="columnConfigs"
        @selection-change="handleSelectionChange"
        :selectable="false"
        orderable
        v-loading="loading"
        :pages="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template slot-scope="{ row }">
          <template v-if="row.name == 'action'">
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="edit(row.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="handleDelete(row.row)"
              >删除</el-button
            >
          </template>
          <template v-else-if="row.name == 'result'">
            <el-tag type="info" v-if="row.row.result == '0'">失败</el-tag>
            <el-tag type="success" v-if="row.row.result == '1'">成功</el-tag>
            <el-tag type="warning" v-if="row.row.result == '2'">无果</el-tag>
          </template>
          <template v-else-if="row.name == 'total'">
            {{ gettotal(row.row) }}
          </template>

          <template v-else-if="row.name == 'usingStatus'">
            {{ getOptionLabel(row.row.usingStatus, usingStatusList) }}
          </template>
        </template>
      </HTable>
    </div>
    <div class="vpnform">
      <add
        ref="AddDialog"
        :dialogVisible1.sync="dialogVisible1"
        :editFlag.sync="editFlag"
        @submit="submitaddForm"
      ></add>
    </div>
    <el-dialog title="关联场景详情" :visible.sync="dialogTableVisible">
      <el-table
        :data="gridData"
        border
        :header-cell-style="{
          background: '#F5F5F5',
          color: '#333',
        }"
        stripe
        max-height="500"
      >
        <el-table-column
          property="sceneName"
          label="场景名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column property="sceneType" label="风险类型" width="150">
          <template v-slot="scoped">
            {{ $getOptionLabel(scoped.row.sceneType, sceneTypeList) }}
          </template>
        </el-table-column>
        <el-table-column property="riskLevel" label="风险等级" width="100">
          <template v-slot="scoped">
            {{ $getOptionLabel(scoped.row.riskLevel, riskLevelList) }}
          </template>
        </el-table-column>
        <el-table-column
          property="weight"
          label="权重"
          width="50"
        ></el-table-column>
        <el-table-column property="createTime" label="创建时间" width="170">
          <template v-slot="scoped">
            {{ getTimeStr(scoped.row.matchTime) }}
          </template></el-table-column
        >
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false" type="primary"
          >返 回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import add from "./addoredit/add.vue";
import { columnConfigs } from "./columnConfigs.js";
import { addList, editList, getList, delCurRow } from "@/api/yybl/wstbetdata";
import { listscene } from "@/api/yybl/riskScene";
import { validateIpPort } from "@/utils/validate";
import { mapState } from "vuex";
import { roundToDecimalPlace } from "../riskmodel/integration/data";
import dayjs from "dayjs";
export default {
  components: {
    add,
  },
  mixins: [table], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {},
  data() {
    let checkNumber = (rex, value, callback) => {
      // if (!value) {
      //   return callback(new Error('年龄不能为空'));
      // }
      // const rule = new RegExp("^0.\d$");
      const rule = /^\d*$/;
      if (rule.test(value)) {
        callback();
      } else {
        callback(new Error("请输入数字"));
      }
    };
    return {
      dialogTableVisible: false,
      gridData: [],
      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      usingStatusList: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "停用",
          value: "1",
        },
      ],
      columnConfigs,
      dialogVisible1: false,
      editFlag: false,
      curRow: {},
      form: {
        sceneId: "",
        modelName: "",
        trustType: "",
        usingStatus: "",
      },
      sceneTableList: [],
    };
  },
  watch: {},
  computed: {
    ...mapState("common", [
      "sceneList",
      "xinrenList",
      "riskLevelList",
      "sceneTypeList",
    ]),
  },
  methods: {
    getTimeStr(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },
    gettotal(row) {
      const { curPointA, curPointB, psyqualityA, psyqualityB } = row;
      if (curPointA && curPointB && psyqualityA && psyqualityB) {
        const total =
          Number(curPointA) +
          Number(psyqualityA) -
          Number(curPointB) -
          Number(psyqualityB);
        const res = roundToDecimalPlace(total, 2);
        return ` ${Number(curPointA) + Number(psyqualityA)}:${
          Number(curPointB) + Number(psyqualityB)
        }=${res}`;
      } else {
        return "--";
      }
    },
    detailsence(row) {
      this.dialogTableVisible = true;
      console.log(this.sceneTableList, row);
      const ids = row.sceneId.split(",");
      console.log(ids);
      this.gridData = this.sceneTableList.filter((i) =>
        ids.includes(i.id + "")
      );
    },
    getOptionLabel(val, list) {
      return list.filter((i) => i.value == val)[0]?.label;
    },
    add() {
      this.editFlag = false;
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs.AddDialog.add();
      });
    },
    edit(row) {
      this.editFlag = true;
      this.dialogVisible1 = true;
      this.curRow = row;
      this.$refs.AddDialog.edit(row);
      this.$refs?.addform?.clearValidate();
    },
    async handleDelete(row) {
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let id = row.id || "";
          const res = await delCurRow({
            id,
          });
          if (res.rescode == "200") {
            this.$message.success("删除成功");
            this.refresh();
          } else this.$message.error(res.msg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitaddForm(val) {
      if (val == 200) {
        this.refresh();
      }
    },
    handleClose() {
      this.dialogVisible1 = false;
    },
    handleSelectionChange() {},
    getparams() {
      const { sceneId, modelName, trustType, usingStatus } = this.form;
      return {
        sceneId,
        modelName,
        trustType,
        usingStatus,
      };
    },
    refresh() {
      console.log(306);
      this.getlists(getList, {});
    },
    resetForm() {
      this.$nextTick(() => {
        this.$refs["form"].resetFields();
        this.refresh();
      });
    },
    async getsceneList() {
      try {
        let params = {};
        const res = await listscene(params);
        if (res && res.rescode === 200) {
          this.sceneTableList = res.data.dataList;
        } else {
          this.sceneTableList = [];
        }
      } catch (error) {
        this.sceneTableList = [];
      }
    },
  },
  created() {
    this.refresh();
    // this.getsceneList();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
  .el-icon-document + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
  .el-table {
    margin-top: 0 !important;
  }
}
.addDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    .el-form-item.slider {
      width: 100%;
    }
  }
}
.queryform {
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      max-width: 25%;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 25%;
    }
  }
}
</style>
